<template>
  <el-container style="height: 100vh;">
    <el-aside>
      <shelf-meun :books="newBookList"></shelf-meun>
    </el-aside>
    <el-container>
      <el-header>
        <el-input style="width: 20%;" v-model="input" placeholder="请输入内容"></el-input>
        <el-button id="booksearch" type="primary" icon="el-icon-search" @click="BookSearch">搜索</el-button>
        <el-button id="bookupload" size="medium" round icon="el-icon-circle-plus-outline" @click="onloadEpub()">upload
        </el-button>
      </el-header>
      <el-main>
        <book-shelf :books="newBookList"></book-shelf>
      </el-main>
      <el-footer>
        <form id="fileforminput">
          <input type="file" name="filename" accept=".epub" id="open" style="display:none" />
        </form>
      </el-footer>
    </el-container>
  </el-container>
</template>
 
<script>
import BookShelf from '@/components/BookShelf'
import ShelfMeun from '@/components/ShelfMeun'
import Idb from 'idb-js'  //  引入Idb
import db_books_config from '../assets/db_books_config'   //  引入数据库配置
// import $ from 'jquery' //引入jq
document.body.parentNode.style.overflowY = "hidden";//隐藏浏览器滚动条
export default {
  name: 'Eshelf',
  components: {//调用外部的组件
    BookShelf,
    ShelfMeun
  },
  data() {
    return {
      input: "",
      books: [
        {
          bookindex: 1001,
          bookname: "三国演义",
          bookimgurl: "../../static/三国演义.png",
          bookurl: "三国演义",
        },
        {
          bookindex: 1002,
          bookname: "红楼梦",
          bookimgurl: "../../static/红楼梦.png",
          bookurl: "红楼梦",
        },
        {
          bookindex: 1003,
          bookname: "西游记",
          bookimgurl: "../../static/西游记.png",
          bookurl: "西游记",
        },
        {
          bookindex: 1004,
          bookname: "水浒传",
          bookimgurl: "../../static/水浒传.png",
          bookurl: "水浒传",
        },
        {
          bookindex: 1005,
          bookname: "围城",
          bookimgurl: "../../static/围城.png",
          bookurl: "围城",
        },
        {
          bookindex: 1006,
          bookname: "孙子兵法",
          bookimgurl: "../../static/孙子兵法.png",
          bookurl: "孙子兵法",
        },
        {
          bookindex: 1007,
          bookname: "解忧杂货店",
          bookimgurl: "../../static/解忧杂货店.png",
          bookurl: "解忧杂货店",
        },
        {
          bookindex: 1008,
          bookname: "三体1《地球往事》",
          bookimgurl: "../../static/三体1《地球往事》.png",
          bookurl: "三体1《地球往事》",
        },
        {
          bookindex: 1009,
          bookname: "三体2《黑暗森林》",
          bookimgurl: "../../static/三体2《黑暗森林》.png",
          bookurl: "三体2《黑暗森林》",
        },
        {
          bookindex: 1010,
          bookname: "三体3《死神永生》",
          bookimgurl: "../../static/三体3《死神永生》.png",
          bookurl: "三体3《死神永生》",
        },
        {
          bookindex: 1011,
          bookname: "边城-沈从文",
          bookimgurl: "../../static/边城-沈从文.png",
          bookurl: "边城-沈从文",
        },
      ],
      newBookList: []//存储查询后的新数据
    }
  },
  mounted() {
    // this.$nextTick(() => {//页面加载前赋值
    //   this.newBookList = this.books
    //   //   // Idb(db_books_config).then(books_db => {

    //   //   //   books_db.queryAll({
    //   //   //         tableName: "books",
    //   //   //         success: (res) => {
    //   //   //             console.log(res)
    //   //   //         }
    //   //   //     });
    //   //   //     books_db.close_db();
    //   //   //       })
    //   // },
    // }
    // ),
    Idb(db_books_config).then(books_db => {
      books_db.queryAll({
        tableName: "booklist",
        success: (res) => {
          if (res.length == 0) {
            for (var i = 0; i < this.books.length; i++) {
              books_db.insert({
                tableName: "booklist",
                data: this.books[i],
                success: () => {
                  console.log("添加成功")
                }
              });
            }
            books_db.queryAll({
              tableName: "booklist",
              success: (res) => {
                this.newBookList = res;
                books_db.close_db();
              }
            })
          }
          else {
            // console.log(res)
            this.newBookList = res;
          }

        }
      });
      // books_db.queryAll({
      //     tableName: "grade",
      //     success: (res) => {
      //         console.log(res)
      //     }
      // });

    })
  },
  methods: {
    BookSearch() {
      console.log(this.input)
      Idb(db_books_config).then(books_db => {
        books_db.queryAll({
          tableName: "booklist",
          success: (res) => { this.newBookList = res; }
        })
      })
      if (this.input == "") return;
      console.log(this.newBookList)
      this.newBookList = [];
      console.log(this.newBookList)
      Idb(db_books_config).then(books_db => {
        books_db.queryAll({
          tableName: "booklist",
          success: res => {
            console.log("sdasda")
            console.log(res)
            this.newBookList = [];
            res.forEach(element => {
              if (element.bookname.search(this.input)) {
                console.log("输入无效或为空")
                console.log(element)

              }
              else {
                console.log(element)
                console.log(this.newBookList)
                this.newBookList.push(element)
                console.log(this.newBookList)
                console.log("成功查询")
              }
            },
            )
            //弹窗显示
            if (this.newBookList == '') {
              this.$message({
                showClose: true,
                message: '查询书籍不存在',
                type: 'error'
              });
            }
            else {
              this.$message({
                showClose: true,
                message: '查询成功',
                type: 'success'
              });
            }

            console.log(this.newBookList)
          }
        });
      })
    },

    onloadEpub: function () {

      var that = this;
      var filee = document.getElementById('open');
      filee.click()
      filee.addEventListener('change', function () {
        console.log(filee)
        var filesList = filee.files;
        console.log(filesList[0] + "filesssssss")
        if (filesList.length == 0) {         //如果取消上传，则改文件的长度为0         
          return;
        } else {
          console.log("文件" + filee);
          //如果有文件上传，这在这里面进行
          let bookName = filee.files[0].name;
          console.log(bookName);
          let bookNameString = (bookName + "").substring(0, bookName.length - 5)//截取名字
          console.log(that.newBookList[that.newBookList.length - 1].bookindex)//最后一本书的id
          Idb(db_books_config).then(books_db => {
            books_db.insert({
              tableName: "booklist",
              // data:book,
              data: {
                bookindex: that.newBookList[that.newBookList.length - 1].bookindex + 1,
                bookname: bookNameString,
                // bookimgurl: "../../static/" + bookNameString + ".png",
                bookimgurl: "../../static/bookDefault.png",
                bookurl: bookNameString
              },
              success: () => {
                console.log("book添加成功")
              }
            });
            books_db.close_db();
          })
        }
        filee.value = '';//清除input残留的上一个文件
      });

    },
  }

}

</script>
  
<style scoped lang='scss'>
//scss格式的样式可以直接嵌套书写
.el-header {
  background-color: #B3C0D1;
  color: #333;
  text-align: right;
}

.el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: right;
  line-height: 60px;
}


.el-aside {
  background-color: #545c64;
  color: #333;
  width: 300px !important;

  @media screen and (max-width: 800px) {
    width: 180px !important;
  }
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  direction: horizontal
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-main .el-col {
  margin: 2px;
  height: 180px;
  width: 130px;
  border-radius: 4px;

}
</style>
  